<template>
  <!--底部-->
  <footer id="foot">
    <ul class="footer">
      <li class="foot">
        <router-link to="/" class="footstep">
          <span class="step1 ">
          <template v-if="tabNum==0">
            <img src="../../assets/images/tab_1_selected.png" alt="" />
          </template>
            <template v-else>
            <img src="../../assets/images/tab_1.png" alt="" />
          </template>
          </span>
          <span class="step2 " :class="[tabNum==0? 'sindex':'']">侍酒师</span>
        </router-link>
      </li>
      <li class="foot">
        <router-link to="/shop" class="footstep">

          <span class="step1 ">
          <template v-if="tabNum==1">
            <img src="../../assets/images/tab_2_selected.png" alt="" />
          </template>
            <template v-else>
            <img src="../../assets/images/tab_2.png" alt="" />
          </template>
          </span>
          <span class="step2" :class="[tabNum==1? 'sindex':'']">商城</span>

        </router-link>
      </li>
      <li class="foot">
        <router-link to="/cart" class="footstep" >
          <span class="step1 ">
          <template v-if="tabNum==2">
            <img src="../../assets/images/tab_3_selected.png" alt="" />
          </template>
            <template v-else>
            <img src="../../assets/images/tab_3.png" alt="" />
          </template>
          </span>
          <span class="step2" :class="[tabNum==2? 'sindex':'']">购物车</span>

        </router-link>
      </li>
      <li class="foot">
        <router-link  to="/mine" class="footstep">
          <span class="step1 ">
          <template v-if="tabNum==3">
            <img src="../../assets/images/tab_4_selected.png" alt="" />
          </template>
            <template v-else>
            <img src="../../assets/images/tab_4.png" alt="" />
          </template>
          </span>
          <span class="step2" :class="[tabNum==3? 'sindex':'']">我的</span>
        </router-link>
      </li>
    </ul>
  </footer>
</template>

<script>
  export default {
    props:['tabNum'],
    name: 'foot',
    data() {
      return {
      }
    },
    methods:{

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
a{
  text-decoration: none;
}
.step1{
  background: transparent;

}
</style>
